/**
 * Description
 *
 * Creation Date 28/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { is, fromJS} from 'immutable';
import { IoArrowUpB, IoArrowDownB } from 'react-icons/lib/io';
import FilterItem from './FilterItem'

export default class FilterList extends Component {
	constructor(props) {
		super(props)
		this.state = {
			curSortType: '',
			showCnt: false,
			filterTitleList: ['category', 'brand', 'gender', 'price sort']
		}
	}

	componentWillMount() {
		this.initSortType(this.props);
	}

	componentWillUpdate(nextProps, nextState) {
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	initSortType = (props) => {
		let type = '';
		if(props.keyword) {
			type = ''
		} else if(props.brandId) {
			type = 'brand';
		} else if(props.categoryId) {
			type = 'category';
		} else if(props.genderId) {
			type = 'gender';
		} else if(props.sort) {
			type = 'price sort';
		} else {
			type = ''
		}
		this.setState({curSortType: type, showCnt: false})
	}

	onChangeTpye = (type) => {
		if(this.state.curSortType === type) {
			this.setState({curSortType: '', showCnt: false})
		} else {
			this.setState({curSortType: type, showCnt: true})
		}

	};

	render() {
		return (
			<div className="filter-container">
				<ul className="filter-title">
					{
						this.state.filterTitleList && this.state.filterTitleList.map((item, index) =>
							<li key={index} className={this.state.curSortType === item ? 'selected': ''} onClick={() => this.onChangeTpye(item)}>{item} <IoArrowDownB/></li>
						)
					}
				</ul>
				{
					this.state.curSortType === 'brand' && this.state.showCnt && <FilterItem type="brand" {...this.props}/>
				}
				{
					this.state.curSortType === 'gender' && this.state.showCnt && <FilterItem type="gender" {...this.props}/>
				}
				{
					this.state.curSortType === 'category' && this.state.showCnt && <FilterItem type="category" {...this.props}/>
				}
				{
					this.state.curSortType === 'sort' && this.state.showCnt && <FilterItem type="sort" {...this.props}/>
				}
			</div>
		)
	}
}